<template>
	<el-button @click="handleClick" type="primary" size="large">
		<slot></slot>
	</el-button>
	<div class="m--choose-icon-dialog-body-height">
		<el-dialog :title="title" v-model="dialogVisible">
			<div class="container">
				<div class="item"
				 v-for="(item,index) in Object.keys(ELIcons)" 
				 :key=index
				 @click="clickItem(item)">
					<div class="icon">
						<component :is="`el-icon${toLine(item)}`"></component>
						<!-- <el-icon><AddLocation /></el-icon> -->
					</div>
					<div class="text">{{item}}</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
	import * as ELIcons from '@element-plus/icons-vue'
	import { toLine } from '../../../utils'
	import{useCopy} from '../../hooks/usecopy'
	import { ref, watch } from 'vue'
import { it } from 'element-plus/es/locales.mjs'
	let props = defineProps<{
		// 弹出框的标题
		title : string,
		// 控制弹出框是否显示
		visible : boolean
	}>()

	let emits = defineEmits(['update:visible'])
	let dialogVisible = ref<boolean>(props.visible)
	// 点击按钮显示对话框
	let handleClick = () => {
		// dialogVisible.value=!dialogVisible.value
		console.log('111', props.visible, dialogVisible.value)
		// 修改父组件的数据
		emits('update:visible', !props.visible)
	}
	watch(() => props.visible, val => {
		dialogVisible.value = val
	})
	watch(() => dialogVisible.value, val => {
		emits('update:visible', val)
	})
	// 点击组件获取名字
	let clickItem=(item:any)=>{
		
		let text=`<el-icon${toLine(item)} />`
		// console.log(item,text)
		useCopy(text)
		dialogVisible.value=false
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		align-items: center;
	}

	.item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
		cursor: pointer;
		height: 70px;
	}

	.icon {
		font-size: 14px;
	}

	.text {
		flex: 1;
	}

	svg {
		width: 2em;
		height: 2em;
	}
</style>
<!-- 
<template>
  <el-button plain @click="dialogVisible = true">
    Click to open the Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script> -->